import React from 'react';
import './MainLayout.scss';

export default function MainLayout({ children }) {
  return (
    <div className="main-container">
      <nav className="side-nav">
        <div className="status-indicator">
          <div className="battery-icon">
            <i className="icon-battery-80" />
            <span>82%</span>
          </div>
          <div className="network-status">
            <i className="icon-signal" />
          </div>
        </div>
        <div className="nav-item active">
          <i className="icon-dashboard" />
        </div>
        <div className="nav-item">
          <i className="icon-car" />
        </div>
        <div className="nav-item">
          <i className="icon-media" />
        </div>
        <div className="quick-access">
          <div className="nav-item">
            <i className="icon-climate" />
          </div>
          <div className="nav-item">
            <i className="icon-defog" />
          </div>
        </div>
      </nav>
      <main className="content-area">
        {children}
      </main>
    </div>
  );
}